<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D转换</title>
    <style>
        .main{
            width: 100px;
            height: 100px;
            position: relative;
        }
        .main div{
            height: 50px;
            width: 50px;
            position: absolute;
            color:#fff
        }
    </style>
</head>
<body>
<ul>
    <li>
        <p>rotateX 旋转</p>
        <style>
            .default {
                background: red;
            }
            .rotateX {
                background: blue;
                transform: rotateX(120deg)
            }
        </style>
        <div class="main">
            <div class="default">123</div>
            <div class="rotateX">123</div>
        </div>
    </li>
    <li>
        <p>rotateY 旋转</p>
        <style>
            .default {
                background: red;
            }
            .rotateY {
                background: blue;
                transform: rotateY(120deg)
            }
        </style>
        <div class="main">
            <div class="default">456</div>
            <div class="rotateY">456</div>
        </div>
    </li>
    <li>
        <p>rotateZ 旋转</p>
        <style>
            .default {
                background: red;
            }
            .rotateZ {
                background: blue;
                transform: rotateZ(45deg)
            }
        </style>
        <div class="main">
            <div class="default">789</div>
            <div class="rotateZ">789</div>
        </div>
    </li>
    <li>
        <p>rotate3d 旋转 分别在x y z轴上旋转 45°</p>
        <style>
            .default {
                background: red;
            }
            .rotate3d {
                left: 200px;
                background: blue;
                transform: rotate3d(0, 0, 1, 45deg)
            }
        </style>
        <div class="main">
            <div class="default">789</div>
            <div class="rotate3d">789</div>
        </div>
    </li>
    <li>
        <p>scaleX 缩放</p>
        <style>
            .default {
                background: red;
            }
            .scaleX {
                background: blue;
                transform:scaleX(.5);
            }
        </style>
        <div class="main">
            <div class="default"></div>
            <div class="scaleX"></div>
        </div>
    </li>
    <li>
        <p>scaleY 缩放</p>
        <style>
            .default {
                background: red;
            }
            .scaleY {
                background: blue;
                transform:scaleY(.5);
            }
        </style>
        <div class="main">
            <div class="default"></div>
            <div class="scaleY"></div>
        </div>
    </li>
    <li>
        <p>scaleZ 缩放</p>
        <style>
            .default {
                background: red;
            }
            .scaleZ {
                background: blue;
                transform:scaleZ(.5);
            }
        </style>
        <div class="main">
            <div class="default"></div>
            <div class="scaleZ"></div>
        </div>
    </li>
    <li>
        <p>scale3d x y z缩放，  在单独使用scale3d和scaleZ时，z值没有任何效果</p>
        <style>
            .default {
                background: red;
            }
            .scale3d {
                background: blue;
                transform:scale3d(.5, .5, .5);
            }
        </style>
        <div class="main">
            <div class="default"></div>
            <div class="scale3d"></div>
        </div>
    </li>
    <li>
        <p>matrix3d 4*4 矩阵</p>
        <p>https://www.cnblogs.com/Ivy-s/p/6786622.html</p>

        <style>
            .matrix1 {
                background: red;
                transform:matrix(1,0,0,1,0,0);
            }
            .matrix2 {
                background: blue;
                transform: matrix(0.707,0.707,-0.707,0.707,0,0);
            }
        </style>
        <div class="main">
            <div class="matrix1"></div>
            <div class="matrix2"></div>
        </div>
    </li>
</ul>
</body>
</html>
